// 购物车的逻辑代码
// 0. 获取元素
const emptyBox = document.querySelector('.empty')
const cartListBox = document.querySelector('.cart')

// 1. 验证登录
const id = window.localStorage.getItem('id')
const token = window.localStorage.getItem('token')

!id ? window.location.href = '../htmls/login.html' : getCartList()

// 2. 请求购物车商品列表
async function getCartList() {
  // 2-1. 发送请求, 请求数据
  const res = await pAjax({
    url: 'http://localhost:8888/cart/list',
    data: { id },
    headers: { authorization: token },
    dataType: 'json'
  })

  // 2-2. 判断登录过期
  if (res.code === 401) {
    window.location.href = '../htmls/login.html'
    return
  }

  // 2-3. 渲染页面
  bindHtml(res)
}

// 3. 渲染页面的处理函数
/*
  分析渲染
    + .top 里面的 全选按钮 是否选中
    + ul 里面的每一个 li
    + .bottom 里面的 总计多少件商品
    + .bottom 里面的 按钮是否有 disable 类名
    + .bottom 里面的 总计多少钱
    + 整体渲染
*/
function bindHtml(res) {
  // 3-1. 判断 res.cart 是否为空
  if (!res.cart.length) {
    emptyBox.classList.add('active')
    cartListBox.classList.remove('active')
    return
  }

  // 3-2. 统计一些信息
  let totalNum = 0, totalPrice = 0, totalSelect = 0
  res.cart.forEach(item => {
    // 只有选中的 is_select === true 的, 计算总件数, 计算总价格
    if (item.is_select) {
      totalNum += item.cart_number
      totalPrice += item.cart_number * item.current_price
      totalSelect++
    }
  })

  // 3-3. 使用 res.cart 进行页面渲染
  let str = `
    <div class="top">
      全选 <input class="select_all" type="checkbox" ${ totalSelect === res.cart.length ? 'checked' : '' }>
    </div>
    <ul class="cart_list">
  `

  // 根据 res.cart 遍历生成 li
  res.cart.forEach(item => {
    str += `
      <li>
        <div class="select">
          <input data-id="${ item.goods_id }" class="select_item" type="checkbox" ${ item.is_select ? 'checked' : '' }>
        </div>
        <div class="show">
          <img src="${ item.img_small_logo }" alt="">
        </div>
        <div class="title">${ item.title }</div>
        <div class="price">￥${ item.current_price }</div>
        <div class="number">
          <button class="sub_btn" data-id="${ item.goods_id }" data-num="${ item.cart_number }">-</button>
          <input type="text" value="${ item.cart_number }">
          <button data-num="${ item.cart_number }" data-id="${ item.goods_id }" data-max="${ item.goods_number }" class="add_btn">+</button>
        </div>
        <div class="subPrice">￥${ (item.current_price * item.cart_number).toFixed(2) }</div>
        <div class="delete">
          <button data-id="${ item.goods_id }" class="delete_btn">删除</button>
        </div>
      </li>
    `
  })

  str += `
    </ul>
    <div class="bottom">
      <p class="totalNum">
        总计 : ${ totalNum } 件商品
      </p>
      <div class="btns">
        <button class="clear">清空购物车</button>
        <button class="delAll${ totalSelect === 0 ? ' disable' : '' }">删除所有已选中</button>
        <button class="pay${ totalSelect === 0 ? ' disable' : '' }">去支付</button>
      </div>
      <p class="totalPrice">
        总计 : ￥ ${ totalPrice.toFixed(2) }
      </p>
    </div>
  `

  // 插入到页面内部
  cartListBox.innerHTML = str
  // 让这个标签显示出来
  cartListBox.classList.add('active')
  emptyBox.classList.remove('active')
}

// 4. 各种点击事件
// 事件委托
// 百分之百按照接口文档发送请求
//   所有的操作, 都是告诉服务器, 然后从新请求一遍购物车列表
cartListBox.addEventListener('click', async e => {

  // 4-1. 判断点击的是每一条信息的 复选框
  if (e.target.className === 'select_item') {
    // 需要拿到一个商品 id
    const goodsId = e.target.dataset.id

    // 发送请求
    const res = await pAjax({
      url: 'http://localhost:8888/cart/select',
      method: 'POST',
      data: { id, goodsId },
      headers: { authorization: token },
      dataType: 'json'
    })

    // 从新请求商品列表
    if (res.code === 1) getCartList()
  }

  // 4-2. 判断点击的是删除每一条信息的 按钮
  if (e.target.className === 'delete_btn') {
    // 拿到商品 id
    const goodsId = e.target.dataset.id

    // 发送请求
    const res = await pAjax({
      url: 'http://localhost:8888/cart/remove',
      data: { id, goodsId },
      headers: { authorization: token },
      dataType: 'json'
    })

    // 从新请求列表数据
    if (res.code === 1) getCartList()
  }

  // 4-3. 判断点击的是每一条商品数量 +
  if (e.target.className === 'add_btn') {
    // 拿到商品 id
    const goodsId = e.target.dataset.id
    // 拿到目前的购买数量, +1
    const num = e.target.dataset.num - 0
    // 拿到库存的数量
    const maxNum = e.target.dataset.max - 0

    // 判断, 如果目前就是最大库存, 那么什么都不做了
    if (num >= maxNum) return alert('库存已经不够了')

    // 发送请求
    const res = await pAjax({
      url: 'http://localhost:8888/cart/number',
      method: 'POST',
      data: { id, goodsId, number: num + 1 },
      headers: { authorization: token },
      dataType: 'json'
    })

    // 从新渲染页面
    if (res.code === 1) getCartList()
  }

  // 4-4. 判断点击的是每一条商品数量 -
  if (e.target.className === 'sub_btn') {
    // 拿到商品 id
    const goodsId = e.target.dataset.id
    // 拿到目前的购买数量
    const num = e.target.dataset.num - 0

    // 判断, 如果当前 num <= 1, 不能少了
    if (num <= 1) return alert('别再少了, 再少没有了')

    // 发送请求
    const res = await pAjax({
      url: 'http://localhost:8888/cart/number',
      method: 'POST',
      data: { id, goodsId, number: num - 1 },
      headers: { authorization: token },
      dataType: 'json'
    })

    // 从新请求列表数据
    if (res.code === 1) getCartList()
  }

  // 4-5. 判断点击的是全选按钮
  if (e.target.className === 'select_all') {
    // 拿到的是自己的选中状态
    const type = e.target.checked ? 1 : 0

    // 发送请求
    const res = await pAjax({
      url: 'http://localhost:8888/cart/select/all',
      method: 'POST',
      data: { id, type },
      dataType: 'json',
      headers: { authorization: token }
    })

    // 从新请求列表数据
    if (res.code === 1) getCartList()
  }

  // 4-6. 判断点击的是删除所有已选中
  if (e.target.className === 'delAll') {
    // 发送请求
    const res = await pAjax({
      url: 'http://localhost:8888/cart/remove/select',
      data: { id },
      dataType: 'json',
      headers: { authorization: token }
    })

    // 从新请求列表数据
    if (res.code === 1) getCartList()
  }

  // 4-7. 判断点击清空购物车
  if (e.target.className === 'clear') {
    // 发送请求
    const res = await pAjax({
      url: 'http://localhost:8888/cart/clear',
      data: { id },
      headers: { authorization: token },
      dataType: 'json'
    })

    // 从新请求列表数据
    if (res.code === 1) getCartList()
  }

  // 4-8. 判断点击的是支付按钮
  if (e.target.className === 'pay') {
    // 发送请求
    const res = await pAjax({
      url: 'http://localhost:8888/cart/pay',
      method: 'POST',
      data: { id },
      headers: { authorization: token },
      dataType: 'json'
    })

    console.log(res)
  }
})
